<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 按顺序导入相关的js和css -->
		<link rel="stylesheet" href="../lib/themes/default/easyui.css" type="text/css"/>
		<link rel="stylesheet" href="../lib/themes/icon.css" />
		
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../lib/jquery/jquery.easyui.min.js"></script>
		
		<!-- 导入分页的中文版语言 -->
		<script type="text/javascript" src="../lib/easyui-lang-zh_CN.js"></script>
		
	</head>
	<body>
		
		<!-- 静态表格 -->
		<table class="easyui-datagrid">
			<thead>
				<tr>
					<th data-options="field:'code'">编码</th>
					<th data-options="field:'name'">名称</th>
					<th data-options="field:'price'">价格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>name1</td>
					<td>2323</td>
				</tr>
				<tr>
					<td>002</td>
					<td>name2</td>
					<td>4612</td>
				</tr>
			</tbody>
		</table>


		
		<!-- 动态填充表格 -->
		<table id="dg"></table>
		<script>
			//动态填充表格
			$("#dg").datagrid({
				url : '${pageContext.request.contextPath}/EmpServlet?time=' + new Date().getTime(),//请求的URl    
			    columns : [[
			    			//filed:值的json的key名,title:表格的列名
					        {field:'empno',title:'编号',width:100},    
					        {field:'ename',title:'姓名',width:100},    
					        {field:'job',title:'工作',width:100},    
					        {field:'mgr',title:'上编',width:100},    
					        {field:'hiredate',title:'入时',width:100},    
					        {field:'sal',title:'月薪',width:100},    
					        {field:'comm',title:'佣金',width:100},    
					        {field:'deptno',title:'部编',width:100}   
			    ]],
			    fitColumns : true,//自适应
			    singleSelect : true,//如果为true，则只允许选择一行
			    pagination : true,//分页显示
			    pageNumber : 1,//当前第 1 页
			    pageSize : 9,//每页显示 9 条
			    pageList : [9],//在设置分页属性的时候 初始化页面大小选择列表。
			    fit:true//表格自适应
			});


		</script>
			
	</body>
</html>
